<template>
	<view class="language">
		<comHead :title="$t('grzx.yysz')" :isLeft="true" :isRight="false"></comHead>
		<view class="locale-list">
			<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">
				<view class="text">
					<text :class="item.code == applicationLocale?'on':''">{{item.text}}</text>
					<text :class="item.code == applicationLocale?'on':''">{{item.mtext}}</text>
				</view>
				<image class="icon-check" src="https://siha.vxmeng.com/static/my/dui.png" mode="widthFix"
					v-if="item.code == applicationLocale"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemLocale: '',
				applicationLocale: ''
			}
		},
		computed: {
			locales() {
				return [
					// {
					// 	text: "跟随系统",
					// 	mtext: "跟随系统",
					// 	code: 'auto'
					// },
					{
						text: "简体中文",
						mtext: "简体中文",
						code: 'zh-Hans'
					},
					{
						text: "English",
						mtext: "英文",
						code: 'en'
					},
					// {
					// 	text: "にっぽんご",
					// 	mtext: "日语",
					// 	code: 'ja'
					// },
					// {
					// 	text: "한국어",
					// 	mtext: "韩语",
					// 	code: 'ko'
					// },
					// {
					// 	text: "繁體中文",
					// 	mtext:"繁体中文",
					// 	code: 'zh-Hant'
					// }
				]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			// this.applicationLocale = uni.getLocale();
			this.applicationLocale = uni.getStorageSync('onLanguage') || uni.getLocale();
			console.log(this.applicationLocale)
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
		},
		methods: {
			onLocaleChange(e) {
				console.log(e, this.isAndroid)
				// if (this.isAndroid) {
				// 	uni.showModal({
				// 		content: this.$t('index.language-change-confirm'),
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				uni.setLocale(e.code);
				// 			}
				// 		}
				// 	})
				// } else {
				uni.setStorageSync('onLanguage', e.code);
				uni.setLocale(e.code);
				this.$i18n.locale = e.code;
				this.setLanguage(e.code);
				// }

			},
			async setLanguage(code) {
				const res = await this.$myRequest({
					url: 'api/user/profile',
					data: {
						lang_type: code == 'en' ? 2 : 1
					}
				})
				if (res.code == 1) {
					console.log(res)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.language {
		height: 100vh;


		.locale-list {
			width: calc(100% - 60rpx);
			margin: 10rpx auto;
			display: flex;
			flex-direction: column;
			padding: 30rpx 60rpx;
			box-sizing: border-box;
			background-color: rgba(40, 46, 81, .6);
			border-radius: 20rpx;

			.locale-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 15px 0rpx;
				border-bottom: 2rpx solid rgba(#FFFFFF, 0.1);

				&:last-child {
					border: none;
				}

				.text {
					flex: 1;
					display: flex;
					flex-direction: column;
					color: #fff;

					text {
						font-size: 32rpx;

						&.on {
							color: #5888FF;
						}

						&:nth-child(2) {
							font-size: 24rpx;
							color: rgba(255, 255, 255, 0.5451);
							margin-top: 10rpx;

							&.on {
								color: rgba(#5888FF, 0.5451);
							}
						}
					}
				}
			}

			.icon-check {
				width: 40rpx;
				flex-shrink: 0;
			}
		}
	}
</style>